<template>
  <div style="margin: 15px" class="pay">
    <el-card>
      <div slot="header" style="margin: 0px 0px 10px 0px">
        <span style="display: flex; align-items: center; font-size: 18px">
          <img
            src="@/assets/img/txjl.png"
            style="width: 20px; margin-right: 5px"
          />
          打款详情</span
        >
      </div>
   
      <!-- <el-divider></el-divider> -->
      <!-- tab-表格 -->
      <div style="margin: 20px 0px">
        <!-- <div class="exportButton">
          <el-button
            icon="el-icon-upload2"
            @click="withdrawExport"
            style="margin-bottom: 10px; background: #f5f5f5"
            >导出</el-button
          >
        </div> -->
          <el-table :data="tableData" height="500">
              <el-table-column prop="orderId" label="订单号" align="center" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="withdrawalAccountNumber" label="收款方账号" align="center" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="userName" label="收款方姓名" align="center">
              </el-table-column>
              <el-table-column prop="withdrawalIdCard" label="身份证号" align="center" show-overflow-tooltip>
                 <template slot-scope="scope">
                    <span>{{scope.row.withdrawalIdCard||'暂无'}}</span>
                  </template>
              </el-table-column>
              <el-table-column
                prop="withdrawalPhoneNumber"
                label="银行预留手机号"
                align="center"
              >
                 <template slot-scope="scope">
                    <span>{{scope.row.withdrawalPhoneNumber||'暂无'}}</span>
                  </template>
              </el-table-column>
              <el-table-column prop="amount" label="到账金额" align="center">
              </el-table-column>
              <el-table-column prop="status" label="状态" align="center">
                   <template slot-scope="scope">
                    <span v-show="scope.row.status=='INIT'">初始化</span>
                    <span v-show="scope.row.status=='FAIL'">失败</span>
                    <span v-show="scope.row.status=='WATTING'">转帐中</span>
                    <span v-show="scope.row.status=='SUCCESS'">成功</span>
                    <!-- <span v-show>{{ scope.row.status }}</span> -->
                  </template>
              </el-table-column>
                <el-table-column
                  label="实际到账金额"
                  prop="realityAmount"
                  align="center"
                />
             
              <el-table-column
                prop="message"
                label="提现信息"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="notes"
                label="备注"
                align="center"
                width="200"
              ></el-table-column>
             
            </el-table>


            <!--  -->
              <!-- <el-table :data="roleList" height="500">
                <el-table-column
                  label="提现时间"
                  prop="createTime"
                  align="center"
                  width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.createTime || "暂无" }}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  label="提现渠道"
                  prop="withdrawalType"
                  align="center"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    <span
                      v-show="scope.row.signAccountType == 'ALIPAYACCOUNTBOOK'"
                      >记账本</span
                    >
                    <span v-show="scope.row.signAccountType == 'WUKONG'"
                      >银行卡</span
                    >
                    <span v-show="scope.row.signAccountType == 'ALIPAY'"
                      >支付宝</span
                    >
                  </template>
                </el-table-column>

                <el-table-column
                  label="渠道名称"
                  prop="channelName"
                  align="center"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.channelName || "暂无" }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="提现金额/元"
                  prop="realityAmount"
                  align="center"
                />
                <el-table-column
                  label="收款户名"
                  prop="userName"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.userName || "暂无" }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="收款账户"
                  prop="accountName"
                  align="center"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.accountName || "暂无" }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="身份证号"
                  prop="idCard"
                  align="center"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.idCard || "暂无" }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="预留手机号" prop="phone" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.phoneNumber || "暂无" }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="提现状态"
                  align="center"
                  prop="withdrawalMessage"
                >
               
                </el-table-column>
                <el-table-column
                  label="失败原因"
                  prop="callbackMessage"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.callbackMessage || "暂无" }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="手续费"
                  prop="serviceAmount"
                  align="center"
                />
                <el-table-column
                  label="实际到账金额"
                  prop="realityAmount"
                  align="center"
                />
              </el-table> -->
            <!--  -->
      </div>
       <pagination
            style="margin:0px 0px 40px 0px"
            :total="total"
            :page.sync="form.pageNum"
            :limit.sync="form.pageSize"
            @pagination="getList"
          />
    </el-card>
  </div>
</template>

<script>
import {
  bankAPI,
  getBatchByUserId,
  findCapRemitPayList,selectBatchPaymentRecordPaging
} from "@/api/finance/index.js";
export default {
  data() {
    return {
      //本地详情的参数
      DetailsParam:{

      },
      // 搜索
      form:{
        form2:"",
        pageSize:10,
        pageNum:1,
      },
      total: 0,

      // ..提现窗口3个数据
      ruleForm: {
        money: "",
        region: "",
        date2: "",
        monetUser: "",
      },
      // ..卡片总数据
      CardData: {
        TotalRevenue: "", //总收入
        CommissionIncome: "", //佣金收入
        ProfitIncome: "", //利润收入
        AccountBalance: "", //账户余额
      },
      rules: {
        money: [{ required: true, message: "请输入提现金额", trigger: "blur" }],
        region: [
          { required: true, message: "请选择提现类型", trigger: "change" },
        ],
        monetUser: [
          { required: true, message: "请选择提现账号", trigger: "blur" },
        ],
      },
      // ..提现账号下拉框数据
      monetUser: [],
      // 用户ID
      userId: 0,

      // 时间
      dateRange: "",
      // tab切换
      activeName: "",
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 分页总条数
      total: 0,
      // 收入表格数据
      noticeList: [],
      // 状态数据字典
      typeOptions: [
        {
          dictLabel: "分润",
          dictValue: 0,
        },
        {
          dictLabel: "佣金",
          dictValue: 1,
        },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // 收入类型
        amountType: "1",
        // 时间
        // dateRange: "",
      },
      tableData: [
       
      ],
    };
  },
  mounted() {
     //获取用户ID
    const userID = sessionStorage.getItem("userID");
    this.userId = userID - 0;
 
    this.getList();
  },
  methods: {
 
    /** 查询列表 */
    async getList() {
      //  this.loading = false;
      //获取批量打款列表
      let param = {
        batchNo:this.$route.query.batchNo,  //批次号
        pageNum: this.form.pageNum, //分页
        pageSize: this.form.pageSize, //分页
      };
    console.log(param, "22");
      
      const dataList = await selectBatchPaymentRecordPaging(param);
       console.log(dataList, "获取批量打款列表");
      if(dataList.code==200){
          this.tableData=dataList.data.list;
      this.total=dataList.data.total;
      }else{
         this.$message.error(data.msg);
      }
    
     
    
    },
 
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClick(tab, event) {
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
   
  },
};
</script>

<style scoped>
.exportButton {
  /* border: 1px red solid; */
  display: flex;
  justify-content: flex-end;
}
.el-form-item__label {
  font-weight: 500;
}
</style>
<style>
.pay .el-date-editor .el-range-separator {
  width: 15%;
}

.pay .el-card__body {
  height: 100%;
}

.pay .pay-item {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pay .pay-item:not(:last-child) {
  border-right: 1px solid #f0f0f0;
}

.pay .pay-item .pay-value {
  font-size: 24px;
  font-weight: bold;
}

.pay .pay-item .pay-value span {
  font-size: 10px;
  margin-right: -5px;
}

.pay .pay-item .value-color {
  color: #3a77f6;
}

.pay .pay-item .pay-label {
  font-size: 11px;
  margin-top: 10px;
}

.pay .el-divider--horizontal {
  background: #f0f0f0;
}

.pay .el-card__header {
  margin: 0 20px;
  padding-left: 0px;
}

.pay .el-tabs__nav-wrap::after {
  height: 0;
}
</style>
